CSS Counter Style Language Support: Medzinárodná lokalizácia pre globálne publikum

V dnešnom globálne prepojenom svete potrebujú weboví vývojári vytvárať webové stránky a aplikácie, ktoré vyhovujú rôznym cieľovým skupinám. To znamená zohľadňovať nielen jazyk, ale aj kultúrne konvencie a číselné systémy používané v rôznych regiónoch. CSS counter styles poskytujú výkonný mechanizmus na formátovanie zoznamov a iného číslovaného obsahu spôsobom, ktorý rešpektuje tieto kultúrne nuansy. Tento komplexný sprievodca preskúma možnosti CSS counter styles pre internacionalizáciu (i18n) a ukáže, ako ich efektívne používať.

Pochopenie CSS Counter Styles

CSS counters sú premenné udržiavané pravidlami CSS na sledovanie, koľkokrát sa použili. Primárne sa používajú na číslovanie zoznamov, nadpisov a iných prvkov. CSS counter styles rozširujú túto funkciu tým, že vám umožňujú definovať vlastné číselné systémy nad rámec štandardných arabských a rímskych číslic. To je kľúčové pre podporu rôznych jazykov a kultúrnych preferencií.

Základné CSS vlastnosti zapojené do používania counter styles sú:

• counter-reset: Inicializuje alebo resetuje counter na konkrétnu hodnotu.
• counter-increment: Zvyšuje hodnotu counter.
• content: Používa sa s pseudo-elementami ::before alebo ::after na zobrazenie hodnoty counter.
• counter() alebo counters(): Funkcie používané v rámci vlastnosti content na formátovanie hodnoty counter.
• @counter-style: Definuje vlastný counter style s rôznymi vlastnosťami na kontrolu formátovania.

Sila @counter-style

Pravidlo @counter-style je srdcom internacionalizácie CSS counter style. Umožňuje vám definovať vlastný číselný systém s rôznymi vlastnosťami, ktoré riadia spôsob, akým sa hodnota counter vykresľuje. Preskúmajme kľúčové vlastnosti v rámci pravidla @counter-style:

• system: Určuje algoritmus používaný na generovanie reprezentácie counter. Bežné hodnoty zahŕňajú cyclic, numeric, alphabetic, symbolic, fixed a additive.
• symbols: Definuje symboly používané counter style, ako sú čísla, písmená alebo vlastné znaky.
• additive-symbols: Používa sa so systémom additive na definovanie symbolov a ich zodpovedajúcich číselných hodnôt.
• suffix: Určuje text pripojený za každú reprezentáciu counter (napr. bodka alebo zatváracia zátvorka).
• prefix: Určuje text pripojený pred každú reprezentáciu counter.
• range: Obmedzuje rozsah hodnôt, pre ktoré je counter style použiteľný.
• pad: Určuje minimálny počet číslic, ktoré sa majú použiť, s vyplnením úvodnými nulami, ak je to potrebné.
• speak-as: Riadi, ako je hodnota counter oznámená čítačkami obrazovky pre prístupnosť.
• fallback: Určuje náhradný counter style, ktorý sa má použiť, ak aktuálny štýl nie je prehliadačom podporovaný.

Príklady internacionalizácie s @counter-style

Teraz preskúmajme niektoré praktické príklady použitia @counter-style na formátovanie counterov pre rôzne jazyky a kultúrne kontexty.

1. Arabské číslice s arabsko-indickými číslicami

Zatiaľ čo arabské číslice (0-9) sú široko používané, mnohé arabsky hovoriace regióny uprednostňujú používanie arabsko-indických číslic (٠‎-٩‎). Môžeme vytvoriť counter style na dosiahnutie tohto cieľa:

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

Tento kód definuje counter style s názvom arabic-indic, ktorý používa arabsko-indické číslice ako symboly. Vlastnosť suffix pridáva bodku a medzeru za každým číslom. CSS potom aplikuje tento štýl na usporiadaný zoznam (<ol>) na zobrazenie čísel v arabsko-indickom formáte.

2. Rímske číslice (veľké a malé písmená)

Rímske číslice sa bežne používajú v rôznych kontextoch a CSS counter styles ich dokážu ľahko spracovať:

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

Tento príklad demonštruje, ako vytvoriť counter styles rímskych číslic s veľkými (upper-roman) aj malými písmenami (lower-roman). Potom môžete tieto štýly použiť na rôzne zoznamy pomocou CSS tried (.upper-roman a .lower-roman). Napríklad:

<ol class="upper-roman">
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ol>

<ol class="lower-roman">
  <li>Položka 1</li>
  <li>Položka 2</li>
  <li>Položka 3</li>
</ol>

3. Gruzínske číslice

Gruzínske číslice používajú jedinečný systém písmen. Môžeme definovať counter style na reprezentáciu čísel v gruzínštine:

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

Tento príklad používa systém fixed, pretože gruzínsky číselný systém má obmedzenú sadu symbolov pre prvých 33 čísel. Vlastnosť range obmedzuje counter style na hodnoty medzi 1 a 33. Pre čísla väčšie ako 33 by ste museli implementovať zložitejšiu logiku alebo iný číselný systém.

4. Arménske číslice

Podobne ako gruzínske, aj arménske číslice používajú písmená na reprezentáciu čísel:

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

Tento príklad je podobný gruzínskemu príkladu, používa systém fixed a definuje arménske písmená ako symboly. Rozsah range je nastavený na 1-39, čo pokrýva základnú sadu arménskych číslic.

5. CJK číslice (čínština, japončina, kórejčina)

CJK číslice ponúkajú väčšiu zložitosť s rôznymi formami pre formálne a neformálne kontexty a rôznymi úrovňami granularity. Pozrime sa na zjednodušenú čínštinu:

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

Upozorňujeme, že ide o zjednodušenú reprezentáciu. Plná podpora CJK číslic, najmä pre väčšie čísla, by si vyžadovala zložitejšiu implementáciu zahŕňajúcu systém additive a spracovanie hodnôt miesta (desiatky, stovky, tisíce atď.). Tento kód demonštruje základnú reprezentáciu číslic.

Pokročilé techniky a úvahy

1. Kombinovanie Counter Styles

Môžete kombinovať viacero counter styles na vytvorenie zložitejších schém číslovania. Napríklad môžete použiť primárny counter pre kapitoly a sekundárny counter pre sekcie v rámci každej kapitoly.

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

Tento kód vytvára hierarchický systém číslovania, kde sú kapitoly číslované postupne a sekcie sú číslované v rámci každej kapitoly (napr. 1.1, 1.2, 2.1, 2.2).

2. Aspekty prístupnosti

Uistite sa, že vaše counter styles sú prístupné používateľom so zdravotným postihnutím. Použite vlastnosť speak-as na kontrolu spôsobu, akým je hodnota counter oznámená čítačkami obrazovky. Napríklad:

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

Vlastnosť speak-as: numbers; hovorí čítačke obrazovky, aby oznámila hodnotu counter ako číslo. Ďalšie možnosti zahŕňajú spell-out (na hláskovanie čísla) a bullets (na oznámenie counter ako odrážky).

Okrem toho poskytnite alternatívny text alebo popisy pre všetky vlastné symboly použité vo vašich counter styles, aby ste zabezpečili, že používatelia so zrakovým postihnutím budú rozumieť významu číslovaného obsahu.

3. Kompatibilita prehliadača

Zatiaľ čo CSS counter styles sú široko podporované modernými prehliadačmi, je nevyhnutné zvážiť staršie verzie prehliadačov. Použite vlastnosť fallback na určenie náhradného counter style, ktorý sa použije, ak prehliadač nepodporuje primárny štýl. Napríklad:

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

V tomto príklade, ak prehliadač nepodporuje systém cyclic alebo vlastné symboly, vráti sa k štýlu zoznamu disc.

4. Kultúrna citlivosť

Pri implementácii counter styles pre rôzne jazyky a kultúry majte na pamäti kultúrne osobitosti. Preskúmajte príslušné číselné konvencie a symboly používané v každom regióne. Vyhnite sa používaniu symbolov alebo formátov, ktoré môžu byť urážlivé alebo nevhodné.

Napríklad niektoré kultúry môžu uprednostňovať používanie rôznych interpunkčných znamienok alebo oddeľovačov vo svojich číselných systémoch. Uistite sa, že vaše counter styles rešpektujú tieto preferencie.

Praktické aplikácie a prípady použitia

CSS counter styles možno použiť v širokej škále scenárov vývoja webu, vrátane:

• Generovanie obsahu: Automaticky číslujte nadpisy a podnadpisy v obsahu.
• Vytváranie číslovaných zoznamov: Formátujte číslované zoznamy v rôznych jazykoch a štýloch.
• Číslovanie krokov v návode: Sprievodca používateľov sériou krokov s jasným a vizuálne príťažlivým číslovaním.
• Implementácia vlastného stránkovania: Vytvárajte vlastné ovládacie prvky stránkovania s jedinečnými schémami číslovania.
• Zobrazovanie zoradených zoznamov: Zobrazujte poradie vizuálne pútavým spôsobom pomocou rôznych counter styles.
• Generovanie právnych dokumentov: Formátujte právne dokumenty so špecifickými požiadavkami na číslovanie.
• Formátovanie vedeckých prác: Zobrazujte rovnice, obrázky a tabuľky s príslušným číslovaním.

Osvedčené postupy pre používanie CSS Counter Styles

Ak chcete zabezpečiť, aby boli vaše CSS counter styles efektívne a udržiavateľné, postupujte podľa týchto osvedčených postupov:

• Používajte popisné názvy pre svoje counter styles: Vyberte si názvy, ktoré jasne označujú účel a formátovanie štýlu (napr. arabic-indic, upper-roman, georgian).
• Udržujte svoje counter styles modulárne: Definujte samostatné counter styles pre rôzne jazyky a číselné systémy.
• Používajte CSS triedy na použitie counter styles: Vyhnite sa priamemu použitiu counter styles na prvky; namiesto toho použite CSS triedy na kontrolu formátovania.
• Dôkladne otestujte svoje counter styles: Otestujte svoje counter styles v rôznych prehliadačoch a zariadeniach, aby ste zabezpečili, že sa správne vykreslia.
• Dokumentujte svoje counter styles: Poskytnite jasnú dokumentáciu pre svoje counter styles vrátane ich účelu, formátovania a použitia.
• Uprednostňujte prístupnosť: Pri vytváraní counter styles vždy zvážte prístupnosť a použite vlastnosť speak-as, aby ste zabezpečili, že hodnoty counter budú správne oznámené čítačkami obrazovky.

Záver

CSS counter styles poskytujú výkonný a flexibilný mechanizmus na internacionalizáciu formátovania číslovaného obsahu na webe. Využitím pravidla @counter-style a jeho rôznych vlastností môžete vytvárať vlastné číselné systémy, ktoré rešpektujú kultúrne konvencie a jazykové nuansy rôznych regiónov. Dodržiavaním osvedčených postupov uvedených v tejto príručke môžete zabezpečiť, aby boli vaše counter styles efektívne, udržiavateľné a prístupné globálnemu publiku. Keďže sa vývoj webu neustále vyvíja, pochopenie a využívanie CSS counter styles pre internacionalizáciu bude čoraz dôležitejšie pre vytváranie skutočne inkluzívnych a užívateľsky prívetivých webových zážitkov. Osvojte si silu CSS counter styles a vytvorte webové stránky, ktoré rezonujú s používateľmi zo všetkých kútov sveta.

Ďalšie čítanie

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• A Complete Guide to CSS Counter Styles